<template>
	<view class="Bigbox">
		<view v-show="!isRecharge">
			<view class="header" @click="$emit('back')">
				<u-icon name="arrow-left" /> 返回
			</view>
			<view class="uni-flexId uni-row">
				<view class="flex-itemId" style="width: 20%;">
					<image src="../../static/image/logo.png"></image>
				</view>
				<view class="flex-itemId ">
					<p class="text-Id">卡号：<span>{{ oData.imsi }}</span></p>
					<p>{{ oCurrent.package_capacity }} {{ oCurrent.capacity_unit | toUpperCase }} /
						{{ oCurrent.service_cycle }} {{ oCurrent.service_cycle_unit | service_cycle_unit }}
					</p>
					<!-- <p v-show="isShare">流量共享</p> -->
				</view>
			</view>
			<view class="uni-flex uni-row">
				<view class="flex-item ">
					<p class="text">卡状态</p>
					<p class="text-state">{{ oData.net_status | net_status }}</p>
				</view>
				<view class="flex-item ">
					<p class="text">设备状态</p>
					<p class="text-state">{{ oData.power_status | power_status }}</p>
				</view>
				<view class="flex-item ">
					<p class="text">在线状态</p>
					<p class="text-state">{{ oData.online_status | online_status }}</p>
				</view>
				<view class="flex-item ">
					<p class="text">操作状态</p>
					<p class="text-state">{{ oData.life_cycle | life_cycle }}</p>
				</view>
			</view>
			<view class="uni-flexDetail">
				<view class="flex-itemDetail">
					<p class="detail-rate">
						<span>已用{{ oCurrent.current_cycle_usage | kbToMb }}M</span>
					</p>
				</view>
				<view class="flex-itemDetail">
					<p class="detail-totalRate" style="margin-top:50rpx"> <text
							class="iconfont icon-wifi">&#xe6a4;</text>总量：<span>{{ oCurrent.package_capacity }}{{ oCurrent.capacity_unit | toUpperCase }}</span>
					</p>
					<!-- <p class="detail-totalRate"><text class="iconfont icon-wifi">&#xe6a4;</text>剩余：<span>30M</span></p> -->
				</view>
			</view>
			<view class="uni-flexBox">
				<p class="uni-flexBoxTitle">卡到期时间:</p>
				<p class="uni-flexBoxCon">{{ oData.service_end_time }}</p>
			</view>
			<view class="uni-flexBox">
				<p class="uni-flexBoxTitle">套餐结束时间:</p>
				<p class="uni-flexBoxCon">{{ oCurrent.expiration_time }}</p>
			</view>
			<!-- <view class="uni-flexBox">
				<p class="uni-flexBoxTitle">套餐服务时间:</p>
				<p class="uni-flexBoxCon">{{ oCurrent.effective_time }} - {{ oCurrent.expiration_time }}</p>
			</view> -->
			<!-- <view class="uni-flexBox">
				<p class="uni-flexBoxTitle">套餐周期时间:</p>
				<p class="uni-flexBoxCon">{{ oCurrent.current_cycle_begin_time }} - {{ oCurrent.current_cycle_end_time }}</p>
			</view> -->
			<!-- <view class="uni-flexBox">
				<p class="uni-flexBoxTitle">语音时长:</p>
				<p class="uni-flexBoxCon">{{ oCurrent.current_cycle_voice_usage }} / {{ oCurrent.voice_capacity }}分钟</p>
			</view> -->
			<view class="uni-flexBox">
				<p class="uni-flexBoxTitle">激活日期:</p>
				<p class="uni-flexBoxCon">{{ oData.activated_at }}</p>
			</view>
			<view class="uni-flexBox">
				<p class="uni-flexBoxTitle">ICCID:</p>
				<p class="uni-flexBoxCon">{{ oData.iccid }}</p>
			</view>
			<!-- <view class="uni-flexCollect uni-row">
				<view class="flex-itemCollect ">
					<p class="img"><text class="iconfont icon-wifi">&#xe6cb;</text></p>
					<p class="img-state">发送短信</p>
				</view>
				<view class="flex-itemCollect ">
					<p class="img"><text class="iconfont icon-wifi" style="color: #4598c2;">&#xe636;</text></p>
					<p class="img-state">续费记录</p>
				</view>
				<view class="flex-itemCollect ">
					<p class="img"><text class="iconfont icon-wifi" style="color: #255db2;">&#xe638;</text></p>
					<p class="img-state">日用流量</p>
				</view>
				<view class="flex-itemCollect ">
					<p class="img"><text class="iconfont icon-wifi" style="color: #201e67;">&#xeb7b;</text></p>
					<p class="img-state">连接记录</p>
				</view>
				<view class="flex-itemCollect ">
					<p class="img"><text class="iconfont icon-wifi" style="color: #8cbf58;">&#xe64b;</text></p>
					<p class="img-state">实名认证</p>
				</view>
			</view> -->
			<u-button type="primary" @click="fRecharge">续费</u-button>
		</view>
		<recharge v-show="isRecharge" ref="Recharge" @back="fBack" />
		<u-toast ref="uToast" />
	</view>
</template>


<script>
	import filters from '@/common/filters.js'
	import Recharge from './Recharge.vue'
	import {
		oApiList
	} from '@/common/info.js';
	export default {
		filters: {
			...filters,
			kbToMb(val) {
				if (!val) {
					return ''
				} else {
					return parseInt(val / 1024 * 100) / 100
				}
			},
			toUpperCase(str) {
				if (!str) {
					return ''
				} else {
					return str.toUpperCase()
				}
			}
		},
		components: {
			Recharge
		},
		data() {
			return {
				filters,
				oData: {},

				isRecharge: false,
			}
		},
		computed: {
			oCurrent() {
				const arr = this.oData.current_products
				return arr && arr[0] || {
					package_capacity: '',
					capacity_unit: '',
					service_cycle: '',
					service_cycle_unit: '',
					current_cycle_usage: '',
					effective_time: '',
					expiration_time: '',
					current_cycle_begin_time: '',
					current_cycle_end_time: '',
					current_cycle_voice_usage: '',
					voice_capacity: '',
				}
			},
			isShare() {
				return this.oCurrent.user_business_type == 2
			}
		},
		methods: {
			fInit(data) {
				// iccid: SIM卡的iccid
				// carrier_type: 运营商类型。(china_telecom - 中国电信， china_mobile - 中国移动， china_unicom - 中国联通)
				// msisdn: SIM卡的手机号码
				// imsi: SIM卡的imsi
				// activated_at: 卡激活时间，生命周期由沉默期变更为可用时间。(YYYY-MM-DD hh:mm:ss)
				// life_cycle: 卡当前的生命周期 (0-库存,1-沉默期,2-可用,3-待续期订购,4-待销卡,5-已销卡)
				// net_status: 卡当前的联网状态 (0-正常,1-强制断网,2-客户断网,3-超套停,4-服务结束,5-提请销卡,6-销卡)
				// bind_status: 机卡分离状态，0表示已分离，1表示未分离，未获取到返回空字符串
				// power_status: 开关机状态，0表示关机，1表示开机，未获取到返回空字符串
				// online_status: 在线状态，0表示不在线，1表示在线，未获取到返回空字符串
				// is_need_verified: 是否需要实名认证，0表示不需要，1表示需要
				// authentication_status: 实名认证状态，0表示未实名，1表示已实名

				// current_products: 当前套餐。如果没有当前套餐，返回空数组。
				// 	user_business_type: 业务模式。(0表示自定义自然月，1表示自定义天数，2表示流量共享)
				// 	code: 显示卡所在账户下的套餐编号
				// 	name: 显示卡所在账户下的套餐名称
				// 	service_cycle: 套餐周期时长
				// 	service_cycle_unit: 套餐周期时长单位。0表示自然月，1表示天
				// 	package_capacity: 套餐周期容量
				// 	capacity_unit: 容量单位，有3种值：mb(兆字节)， gb(千兆字节)，(count)次
				// 	voice_capacity: 周期内语音时长，单位分钟
				// 	subscribed_at: 订购套餐的时间。(YYYY-MM-DD hh:mm:ss)
				// 	effective_time: 套餐服务开始时间。(YYYY-MM-DD hh:mm:ss)
				// 	expiration_time: 套餐服务结束时间。(YYYY-MM-DD hh:mm:ss)
				// 	cycles: 周期数
				// 	cycle_list: 周期序列。例如：2/3， 一共3个周期，目前处于第2个周期
				// 	current_cycle_begin_time: 当前套餐周期的生效时间。(YYYY-MM-DD hh:mm:ss)
				// 	current_cycle_end_time: 当前套餐周期的失效时间。(YYYY-MM-DD hh:mm:ss)
				// 	current_cycle_usage: 当前周期已用量。流量单位为KB，次数单位为次
				// 	current_cycle_voice_usage: 周期内已用语音时长，单位分钟

				// future_products: 后续套餐。如果没有当前套餐，返回空数组。
				// 	user_business_type: 业务模式。(0表示自定义自然月，1表示自定义天数，2表示流量共享)
				// 	code: 显示卡所在账户下的套餐编号
				// 	name: 显示卡所在账户下的套餐名称
				// 	service_cycle: 套餐周期时长
				// 	service_cycle_unit: 套餐周期时长单位。0表示自然月，1表示天
				// 	package_capacity: 套餐周期容量
				// 	capacity_unit: 容量单位，有3种值：mb(兆字节)， gb(千兆字节)，(count)次
				// 	voice_capacity: 周期内语音时长，单位分钟
				// 	cycles: 周期数
				// 	subscribed_at: 订购套餐的时间。(YYYY-MM-DD hh:mm:ss)

				// console.log(data)
				this.isRecharge = false
				this.oData = data
			},
			fBack(bInit) {
				this.isRecharge = false
				if (bInit) {
					this.$emit('fDetail')
				}
			},
			fRecharge() {
				if (!oApiList[this.oData.agent_id]) {
					this.$refs.uToast.show({
						type: 'error',
						title: '该卡号无法续费，请联系合作商'
					})
					return
				}
				this.isRecharge = true
				this.$refs.Recharge.fInit(this.oData)
			}
		}
	}
</script>

<style scoped>
	.Bigbox {
		position: relative;
	}

	page {
		background: #f6f5fb;
	}

	@font-face {
		font-family: 'iconfont';
		/* Project id 2997738 */
		src: url('http://at.alicdn.com/t/font_2997738_6dbvxy6yc4w.woff2?t=1639018022142') format('woff2'),
			url('http://at.alicdn.com/t/font_2997738_6dbvxy6yc4w.woff?t=1639018022142') format('woff'),
			url('http://at.alicdn.com/t/font_2997738_6dbvxy6yc4w.ttf?t=1639018022142') format('truetype');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 14px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
	}

	.uni-flexId {
		display: flex;
		padding: 20rpx 0;
		background: #fff;
	}

	.flex-itemId {
		height: 100rpx;
	}

	.flex-itemId image {
		width: 100%;
		height: 100%;
	}

	.flex-itemId .text-Id {
		margin-top: 8rpx;
		margin-bottom: 12rpx;
	}

	.uni-flex {
		display: flex;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
	}

	.flex-item {
		width: 25%;
		height: 100rpx;
		text-align: center;
		background: #eaf3fa;
		border-right: 1px solid #eee;
		font-size: 12px;
	}

	.flex-item .text {
		color: #bbb;
		margin-top: 8rpx;
		margin-bottom: 12rpx;
	}

	.uni-flexDetail {
		display: flex;
		background-image: linear-gradient(#335aa9, #5e80c7);
	}

	.uni-flexDetail .flex-itemDetail {
		width: 50%;
		height: 200rpx;
		color: #fff;
		font-size: 12px;
	}

	.flex-itemDetail .detail-rate {
		border-radius: 50%;
		width: 160rpx;
		height: 160rpx;
		background: #698bca;
		margin: 0 auto;
		margin-top: 20rpx;
		text-align: center;
		line-height: 160rpx;

	}

	.flex-itemDetail .detail-totalRate {
		margin: 30rpx 0;
	}

	.detail-totalRate text {
		padding-right: 6rpx;
		color: #fff;
	}

	.uni-flexBox {
		display: flex;
		background: #fff;
		border-bottom: 1px solid #eee;
	}

	.uni-flexBox p {
		/* display: inline; */
		width: 50%;
		height: 60rpx;
		font-size: 12px;
		line-height: 60rpx;
		padding: 0 20rpx;
	}

	.uni-flexBox .uni-flexBoxTitle {
		font-weight: 800;
		/* width: 30%; */
	}

	.uni-flexBox .uni-flexBoxCon {
		color: #bbb;
		text-align: right;
	}

	.uni-flexCollect {
		display: flex;
		background: #fff;
	}

	.uni-flexCollect .flex-itemCollect {
		width: 20%;
		height: 120rpx;
		text-align: center;
		border-right: 1px solid #eee;
		font-size: 12px;
		line-height: 54rpx;
	}

	.flex-itemCollect .img-state {
		color: #bbb;
	}

	.flex-itemCollect .img {
		margin-top: 10rpx;
	}
</style>
